import React from 'react'; import useState from './App'; import username from './App'; import setUsername from './App'; import setAppState from './App'; function LoginPage(props) { const onClick = () => { props.onLogin(setUsername); } return ( <div className="chat-login-page-container"> <div className="chat-login-page-controls-container"> <h4>Set your username</h4> <input type="text" placeholder="Username" value={props.username} username={username} setUsername={username} onChange={props.onChange} /> <button type="button" disabled={username.length === 0} onClick='onClick'>Log in</button> </div> </div> ); } export default LoginPage;Sigo tratando de arreglar el código con diferentes variables y tratando de que no sea un valor y simplemente no funciona. Im en una pérdida y no sé qué hacer.
Primero, debe usar la desestructuración de objetos para accesorios
const {nombre de usuario, onChange, onLogin} = props;
En el componente "botón", la propiedad "onClick" espera una función. Con su código onClick='onClick' , la propiedad obtiene una cadena y no una función. No estoy seguro de qué debería hacer la función onClick, pero debería verse así:
<button type="button" disabled={username.length === 0} onClick={()=>{onLogin(setUsername}}>Log in</button>